<div class="panel panel-default">
    <div class="panel-heading">
        任务统计
        <button id="btnRefresh" type="button" class="btn btn-primary btn-xs pull-right">刷新</button>
    </div>
    <div class="panel-body">
        <div id="statistics">
            <h4 class="mt-1">{name}<span class="badge badge-pill badge-primary">{total}</span></h4>
            <div id="pieChart"></div>
        </div>
    </div>
</div>

<script>
    $(function () {
        $("#btnRefresh").click(refresh);
        refresh();
    });
    function refresh() {
        $.get('/task-manager/task/statistics',function (data,status) {
            if(status != 'success'){
                alert('加载节点树失败！');
                return;
            }
            var html = "";
            $.each(data,function (index,item) {
                var name = item.data.name;
                var total = item.data.total;
                html += "<h4 class='mt-1'>"+name+" <span class='badge badge-pill badge-primary'>"+total+"</span></h4>";
                html += "<div id='pieChart"+index+"' style='width: 100%;height: 300px;'></div>";
            });
            $("#statistics").html(html);
            $.each(data,function (index,item) {
                var nodeChart = echarts.init(document.getElementById('pieChart'+index));
                var legendData = ['READY','DISTRIBUTED','PROCESSING','SUCCESS','FAILURE'];
                var seriesData = [];
                $.each(legendData,function (i,n) {
                    seriesData.push({name:n,value:item.data.status[n]});
                });
                console.log(seriesData);
                var option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        type: 'scroll',
                        orient: 'vertical',
                        right: 10,
                        top: 20,
                        bottom: 20,
                        data: legendData
                    },
                    series: [
                        {
                            name: 'Status',
                            type: 'pie',
                            radius: '55%',
                            center: ['40%', '50%'],
                            data: seriesData,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                nodeChart.setOption(option);
            })
        });
    }
</script>
</body>
</html>